<template>
  <div class="kj-con">
    <img src="../../assets/check/banner.png" alt="" srcset="" />
    <div class="s-box">
      <div class="sc-box">
        <div></div>
        <input placeholder="请输入搜索关键词" />
        <div class="s-btn">搜索</div>
      </div>
      <div @click="onTabs(0)" class="h-s h-s1"></div>
      <div @click="onTabs(0)" style="margin-left: 18px">
        政策<span style="font-weight: bold">查询</span>
      </div>
      <div class="s-line"></div>
      <div @click="onTabs(1)" class="h-s h-s2"></div>
      <div @click="onTabs(1)" style="margin-left: 18px">
        政策<span style="font-weight: bold">匹配</span>
      </div>
      <div class="s-line"></div>
      <div @click="onTabs(2)" class="h-s h-s3"></div>
      <div @click="onTabs(2)" style="margin-left: 18px">
        政策<span style="font-weight: bold">订阅</span>
      </div>
    </div>
    <div class="p-body">
      <div class="bgtext">
        <h1>CALENDAR</h1>
        <p>政策申报月历</p>
      </div>
      <div class="month-box">
        <!-- 月历 -->
        <div class="month">
          <div class="mon-top">
            <img src="../../assets/check/n-1.png" alt="" />
            <p>2021</p>
            <img src="../../assets/check/n-2.png" alt="" />
          </div>
          <div class="mon-mid">
            <div v-for="(item, index) in mothList" :key="index">
              <div>
                <p>{{ index + 1 }}</p>
                <p>月</p>
              </div>
              <div>
                <p v-if="item.expiredCount > 0" class="on1">
                  {{ item.expiredCount }}
                </p>
                <p v-if="item.comingSoonCount > 0" class="on2">
                  {{ item.comingSoonCount }}
                </p>
                <p v-if="item.declaringCount > 0" class="on3">
                  {{ item.declaringCount }}
                </p>
              </div>
            </div>
          </div>
          <div class="mon-fot1">
            <p>{{ month }}月可申报政策{{ monthCount }}条</p>
          </div>
          <div class="mon-fot2">
            <div>
              <p class="on1"></p>
              <p>申报已结束</p>
            </div>
            <div>
              <p class="on2"></p>
              <p>申报进行中</p>
            </div>
            <div>
              <p class="on3"></p>
              <p>申报待开始</p>
            </div>
          </div>
        </div>
        <div class="month-r">
          <div class="mon-rtop">
            <div class="tabs">
              <p
                @click="onTabOne(item.value)"
                v-for="(item, index) in monthObjList"
                :key="index"
                :class="{ on: curIndexOne == item.value }"
              >
                {{ item.label }}
              </p>
            </div>
            <p>查看更多>></p>
          </div>
          <div class="mon-rmid">
            <div v-for="(item, index) in list" :key="index" @click="onSee(item)">
              <div class="h-s h-s4">
                {{ item.policyLevel == 1 ? "市级" : "区县" }}
              </div>
              <div class="rmid-con">
                <div class="rmid-1">
                  <p>{{ item.title }}</p>
                  <p class="on1">申报进行中</p>
                </div>
                <div class="rmid-2">
                  <p>申报时间：{{ item.beginTime }} 至 {{ item.endTime }}</p>
                  <!-- <p>申报截止天数：43天</p> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bgtext">
        <h1>POLICY ARCHITECTURE</h1>
        <p>政策体系架构</p>
      </div>
      <div class="tabs" style="width:800px;margin:0 auto">
        <p
          @click="onTabTwo(item.value)"
          :class="{ on: curIndexTwo == item.value }"
          v-for="(item, index) in txList"
          :key="index"
        >
          {{ item.label }}
        </p>
      </div>
      <div class="card-box">
        <div class="card h-s" v-for="(v, index) in botImgList" :key="index">
          <img class="card-i" :src="require('@/assets/check/' + v.icon)" />
          <span>{{ v.text }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      monthObjList: [
        { value: "0", label: "全部" },
        { value: "1", label: "申报进行中" },
        { value: "2", label: "申报待开始" },
        { value: "3", label: "申报已结束" }
      ],
      curIndexOne: 0,
      txList: [
        { value: "0", label: "顶层文件" },
        { value: "1", label: "专项计划" },
        { value: "2", label: "普惠政策" },
        { value: "3", label: "配套举措" }
      ],
      curIndexTwo: 0,
      policyLG: [
        [
          {
            id: "0",
            icon: "c10.png",
            text: "“党建引领、惠才   强企”的八条措施"
          },
          { id: "1", icon: "c11.png", text: "人才创新创业政策" },
          { id: "2", icon: "c12.png", text: "花果山英才计划" },
          { id: "3", icon: "c13.png", text: "人才分类评价" },
          { id: "4", icon: "c14.png", text: "人才安居" },
          { id: "5", icon: "c15.png", text: "人才服务" },
          { id: "6", icon: "c16.png", text: "企业高端人才贡 献奖励" },
          { id: "7", icon: "c17.png", text: "本地人才创业 创新措施" },
          { id: "8", icon: "c18.png", text: "人才“十个一工 程”政策措施" },
          { id: "9", icon: "c19.png", text: "企事业单位聚才用才" }
        ],
        [
          { id: "0", icon: "c20.png", text: "花果山英才计划" },
          { id: "1", icon: "c21.png", text: "521高层次人才 培养工程" }
        ],
        [
          { id: "0", icon: "c30.png", text: "居无忧" },
          { id: "1", icon: "c31.png", text: "业无忧" },
          { id: "2", icon: "c32.png", text: "学无忧" },
          { id: "3", icon: "c33.png", text: "医无忧" },
          { id: "4", icon: "c34.png", text: "其他便利服务" }
        ],
        [
          { id: "0", icon: "c40.png", text: "人才引进" },
          { id: "1", icon: "c41.png", text: "人才培养" },
          { id: "2", icon: "c42.png", text: "人才评价" },
          { id: "3", icon: "c43.png", text: "人才流动" },
          { id: "4", icon: "c44.png", text: "人才激励" },
          { id: "5", icon: "c45.png", text: "投入保障" }
        ]
      ],
      botImgList: [],
      list: [],
      mothList: [],
      month: 1,
      monthCount: 0
    };
  },
  created() {
    this.botImgList = this.policyLG[0];
    this.getPolicyList();
    this.getPolicyMontn();
  },
  methods: {
    async getPolicyList() {
      const res = await this.$store.dispatch("user/getPolicyList", {
        pageNum: 1,
        pageSize: 4
      });

      this.list = res.rows;
    },
    async getPolicyMontn() {
      let yy = new Date().getFullYear();
      this.month = new Date().getMonth() + 1;
      let yy1 = yy + "-01-01";
      let yy2 = yy + "-12-31";
      const res = await this.$store.dispatch("user/getPolicyMontn", {
        calendarDateFrom: yy1,
        calendarDateTo: yy2
      });
      console.log(res);
      this.mothList = res.data;
      this.monthCount = this.mothList[this.month - 1].declaringCount || 0;
      
    },
    onTabOne(ind) {
      this.curIndexOne = ind;
    },
    onTabTwo(ind) {
      this.curIndexTwo = ind;
      this.botImgList = this.policyLG[ind];
    },
    onTabs(type) {
      const list = ["/index/zccx", "/index/zcpp"];
      this.$router.push(list[type]);
    },
    onSee(param){
      console.log(param)
      this.$router.push({
        path:'/index/des',
        query:{
          des:JSON.stringify(param)
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
